<template>
    <div class="content">
        <div class="msg-book-tit">
            订阅{{titles}}
        </div>
        <div class="page-block">
            <div class="book-list">
                <ul class="list-body no-mt">
                    <li class="item" v-if="item.car_level">{{item.car_level}}</li>
                    <li class="item" v-if="item.car_address">{{item.car_address==1? "本地牌照":"外地牌照"}}</li>
                    <li class="item" v-if="item.year_old">{{item.year_old}}年</li>
                    <li class="item" v-if="item.go_long">{{item.go_long}}万公里</li>
                    <li class="item" v-if="item.row_amount">{{item.row_amount}}升</li>
                    <li class="item" v-if="item.car_dis">{{item.car_dis}}排放</li>
                    <li class="item" v-if="item.car_case">{{item.car_case==1? "手动挡":"自动挡"}}</li>

                    <li class="item" v-if="item.car_color">{{item.car_color}}</li>
                    <li class="item" v-if="item.seat_numb">{{item.seat_numb}}座</li>
                    <li class="item" v-if="item.oil_type">{{item.oil_type}}</li>
                    <template v-if="item.other">
                        <li class="item" v-for="i in  JSON.parse(item.other)">
                            <template v-for="i2 in labList">
                                <template v-if="i2.id == i">
                                    {{i2.title}}
                                </template>
                            </template>

                        </li>
                    </template>

                    <li class="item" v-if="item.car_country">{{item.car_country}}</li>
                </ul>
            </div>

            <template v-for="(items,index) in list">
                <div class="media-list">
                    <router-link :to="{name:'buyDetail',query:{id:items.id}}">
                        <van-image fit="cover" class="media-list-logo pull-left" lazy-load :src="img(items.series_thumb?items.series_thumb:items.series.thumb,items.head_img)">
                            <template v-slot:loading>
                                <van-loading type="spinner" size="20"/>
                            </template>
                        </van-image>
                    </router-link>

                    <div class="media-list-body pull-left">
                        <router-link :to="{name:'buyDetail',query:{id:items.id}}" class="media-list-text-top">{{items.car_name?items.car_name:items.series.series_name}}</router-link>
                        <div class="media-list-text-tps">{{stampToDate(items.card_time,2)}}/{{items.mileage}}万公里</div>
                        <div class="media-list-text-bottom">{{items.price}}万</div>
                    </div>
                </div>


            </template>

            <infinite-loading :on-infinite="onLoad" ref="inLoading">
                <div slot="no-results" class="no-more">没有更多了～</div>
                <div slot="no-more" class="no-more">没有更多了～</div>
            </infinite-loading>

        </div>
    </div>
</template>

<script>
    import InfiniteLoading from 'vue-infinite-loading';

    export default {
        name: "msg_user_book_detail",
        components: {
            InfiniteLoading
        },
        data() {
            return {
                titles: this.title,
                pids: this.pid,

                list:[],
                item:{},
                labList:[],

                page:[],
            }
        },
        props: ['pid', 'title'],
        computed: {},
        mounted: function () {
            this.init();
        },
        methods: {
            init() {
                let id = this.pids;
                let that = this;
                this.$api.car.getLable().then(res => {
                    that.labList = res.data.data;
                });
                this.$api.member.getBook(id).then(res => {
                    this.item = res.data.data[0];
                });

            },

            onLoad($state) {
                let that = this;
                this.$api.member.getBookInfo(that.pids,that.page).then(res => {
                    res = res.data;
                    if (res.data.length) {
                        that.list.push(...res.data);
                        that.page++;
                        $state.loaded();
                    } else {
                        $state.complete();
                    }
                });
            },
        },

    }
</script>

<style lang="scss" scoped>
    @import "../../assets/scss/user.scss";
</style>
